<template>
  <div class="zc">
    <nav-header></nav-header>
    <div class="zcNav">
      <div class="left">
        <left-menu></left-menu>
      </div>
      <div class="rightNav">
        <div class="first">订单测试用例维护：</div>
        <div class="second">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="version_number" label="版本号" width="150"></el-table-column>
            <el-table-column prop="date" label="日期" width="150"></el-table-column>
            <el-table-column prop="name" label="用例维护人员姓名" width="150"></el-table-column>
            <el-table-column prop="total_number" label="用例数量" width="150"></el-table-column>

            <el-table-column prop="phone_number" label="电话" width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <div class="inPages">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              background
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import NavHeader from "@/components/NavHeader";
import leftMenu from "@/components/leftMenu";
import { api } from "./api/index";

export default {
  data() {
    return {
      project_name: "订单管理",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266",
          total_number: 100
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266",
          total_number: 100
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266",
          total_number: 100
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266",
          total_number: 100
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266"
        },
        {
          total_number: 100,
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266"
        },
        {
          total_number: 100,
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266"
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266"
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266"
        },
        {
          version_number: "1.0.0",
          date: "2016-05-03",
          name: "王小虎",
          phone_number: "18001104266"
        }
      ]
    };
  },
  components: {
    NavHeader,
    leftMenu
  },
  methods: {
    handleClick(row) {
      let data = {
        version_number: row.version_number,
        project_name: String(this.project_name),
        page: 1
      };
      api({
        url: "/api/api/case/version-case",
        method: "GET",
        params: data
      })
        .then(da => {
          console.log("111");
          console.log(da.data);
          // this.tableData = da.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {}
};
</script>

<style lang='scss' scoped>
.zc {
  height: 100%;
}

.zcNav {
  height: calc(100% - 50px);
  display: flex;
  justify-content: flex-start;
  .rightNav {
    background: #fff;
    width: 100%;
    .first {
      height: 50px;
      background: #ffffff;
      line-height: 50px;
      font-weight: bold;
      line-height: 50px;
      font-size: 20px;
      padding-left: 30px;
      letter-spacing: 10px;
    }
    .second {
      width: 100%;
    }
    .pages {
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: right;
      .inPages {
        margin-top: 20px;
        height: 30px;
      }
    }
  }
}
</style>    